{% extends "base.html" %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='words_learned.css') }}">
{% endblock %}

{% block content %}
<div class="wl-page">
    <div class="wl-header">
        <h1 id="word-list-title" style="color: white; text-align: center;">
            Word List
            <div style="font-size: 0.6em; margin-top: 5px;">{{ words|length }} words</div>
        </h1>
        <div id="create-game-btn" class="wl-create-game-btn">
            New Game (<span id="selected-count">0</span> words)
        </div>
    </div>

    <div class="wl-container">
        <div class="wl-grid">
            {% for word in words %}
                <div class="wl-word-container" data-word="{{ word.english }}">
                    <div class="wl-word-text">{{ word.english }}</div>
                    <div class="wl-status-container">
                        <div class="wl-status wl-spell-{{ word.spell_status }}" 
                             data-status="Spell: {{ word.spell_status|title }}">
                        </div>
                        <div class="wl-status wl-translate-{{ word.translate_status }}"
                             data-status="Translate: {{ word.translate_status|title }}">
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <div id="toast" class="toast"></div>
</div>

<!-- Add JavaScript code -->
<script>
const selectedWords = new Set();
const createGameBtn = document.getElementById('create-game-btn');
const wordListTitle = document.getElementById('word-list-title');
const selectedCount = document.getElementById('selected-count');

document.querySelectorAll('.wl-word-container').forEach(card => {
    card.addEventListener('click', () => {
        const word = card.dataset.word;
        if (card.classList.contains('selected')) {
            card.classList.remove('selected');
            selectedWords.delete(word);
        } else {
            card.classList.add('selected');
            selectedWords.add(word);
        }
        
        // Update selected count and toggle visibility
        selectedCount.textContent = selectedWords.size;
        if (selectedWords.size > 0) {
            createGameBtn.classList.add('active');
        } else {
            createGameBtn.classList.remove('active');
        }
    });
});

createGameBtn.addEventListener('click', async () => {
    try {
        const response = await fetch('/create_game_from_words', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                words: Array.from(selectedWords)
            })
        });
        
        const data = await response.json();
        if (data.success) {
            // Show game links
            const toast = document.getElementById('toast');
            toast.textContent = 'Game created successfully!';
            toast.classList.add('show');
            
            // 3秒后自动跳转
            setTimeout(() => {
                window.location.href = data.spell_url;
            }, 3000);
            
            // 2.7秒后隐藏 toast（为跳转提供过渡）
            setTimeout(() => {
                toast.classList.remove('show');
            }, 2700);
        } else {
            const toast = document.getElementById('toast');
            toast.textContent = 'Failed to create game: ' + data.message;
            toast.classList.add('show');
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }
    } catch (error) {
        console.error('Error:', error);
        alert('An error occurred while creating the game');
    }
});
</script>
{% endblock %}
